<template>
	<view class="update_yang_zhi_box bgc_eee" :style="{height: windowHeight + 'px'}">
		<!-- 标题 -->
		<view class="title_box pv_20 text_center flex_column_between">
			<view class="title1">
				<text class="title vertical_text mn fs_36_i mainColor fw_bold">ᠥᠰᠦᠯᠲᠡ᠎ᠶᠢᠨ ᠲᠡᠮᠳᠡᠭᠯᠡᠯ</text>
			</view>
		</view>
		
		<!-- content box -->
		<view class="content_box p_10 border_box relative">
			<scroll-view class="tab_box bgc_fff border_radius_10 p_10 border_box" scroll-x="true">
				<view class="tab_item" :class="{ active_tab: activeIndex == 0 }" @click="activeIndex = 0">
					<text class="vertical_text mn fs_36_i">ᠲᠥᠷᠦᠭᠰᠡᠨ \n ᠬᠤᠭᠤᠴᠠᠭ᠎ᠠ</text>
				</view>
				<view class="tab_item" :class="{ active_tab: activeIndex == 1 }" @click="activeIndex = 1">
					<text class="vertical_text mn fs_36_i">ᠰᠦ \n ᠲᠠᠰᠤᠷᠠᠬᠤ \n ᠬᠤᠭᠤᠴᠠᠭ᠎ᠠ</text>
				</view>
				<view class="tab_item" :class="{ active_tab: activeIndex == 2 }" @click="activeIndex = 2">
					<text class="vertical_text mn"> <text class="rotate_90 mb_10">6</text> ᠰᠠᠷ᠎ᠠ</text> 
				</view>
				<view class="tab_item" :class="{ active_tab: activeIndex == 3 }" @click="activeIndex = 3">
					<text class="vertical_text mn fs_36_i"><text class="mb_10">12</text> ᠰᠠᠷ᠎ᠠ</text>
				</view>
				<view class="tab_item" :class="{ active_tab: activeIndex == 4 }" @click="activeIndex = 4">
					<text class="vertical_text mn fs_36_i"><text class="mb_10">18</text> ᠰᠠᠷ᠎ᠠ</text>
				</view>
				<view class="tab_item" :class="{ active_tab: activeIndex == 5 }" @click="activeIndex = 5">
					<text class="vertical_text mn fs_36_i"><text class="mb_10">24</text> ᠰᠠᠷ᠎ᠠ</text>
				</view>
			</scroll-view>
			
			<!-- 记录日期 -->
			<view class="w_full h_120 flex_row_between bgc_fff border_radius_10 p_10 border_box mt_20">
				<view class="w_30_p h_full text_center">
					<text class="vertical_text mn text_center fs_36">ᠡᠳᠦᠷ ᠬᠤᠭᠤᠴᠠᠭ᠎ᠠ</text>
				</view>
				<view class="w_60_p">
					<uni-datetime-picker type="date" :clear-icon="true" v-model="growInfo.date" placeholder=" " />
				</view>
			</view>
			
			<!-- 体重、身高、胸围、腹围、十字部、体斜长 --> 
			<view class="w_full border_radius_10 bgc_fff p_10 border_box mt_20">
				<view class="w_full h_100 flex_row_between mt_10">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn fs_36">ᠪᠡᠶ᠎ᠡ᠎ᠶᠢᠨ ᠬᠦᠨᠳᠦ (kg)</text>
					</view>
					<view class="w_30_p h_full text_center bgc_eee border_radius_10 pv_10 border_box">
						<input class="mt_15" type="number" v-model="growInfo.weight" >
					</view>
				</view>
				<view class="w_full h_100 flex_row_between mt_10">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn fs_36">ᠪᠡᠶ᠎ᠡ᠎ᠶᠢᠨ ᠥᠨᠳᠦᠷ (cm)</text>
					</view>
					<view class="w_30_p h_full text_center bgc_eee border_radius_10 pv_10 border_box">
						<input class="mt_15" type="number" v-model="growInfo.height" >
					</view>
				</view>
				<view class="w_full h_100 flex_row_between mt_10">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn text_center fs_36">ᠴᠡᠭᠡᠵᠢᠨ ᠲᠣᠭᠤᠷᠢᠭ (cm)</text>
					</view>
					<view class="w_30_p h_full text_center bgc_eee border_radius_10 pv_10 border_box">
						<input class="mt_15" type="number" v-model="growInfo.xiongWei" >
					</view>
				</view>
				<view class="w_full h_100 flex_row_between mt_10">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn text_center fs_36">ᠬᠡᠪᠡᠯᠢ᠎ᠶᠢᠨ ᠲᠣᠭᠤᠷᠢᠭ (cm)</text>
					</view>
					<view class="w_30_p h_full text_center bgc_eee border_radius_10 pv_10 border_box">
						<input class="mt_15" type="number" v-model="growInfo.fuWei">
					</view>
				</view>
				<view class="w_full h_100 flex_row_between mt_10">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn text_center fs_36">ᠲᠣᠨᠤᠯᠵᠢᠨ ᠬᠡᠰᠡᠭ (cm)</text>
					</view>
					<view class="w_30_p h_full text_center bgc_eee border_radius_10 pv_10 border_box">
						<input class="mt_15" type="number" v-model="growInfo.shiZiBu">
					</view>
				</view>
				<view class="w_full h_100 flex_row_between mt_10">
					<view class="w_30_p h_full text_center">
						<text class="vertical_text mn text_center fs_36">ᠪᠡᠶ᠎ᠡ᠎ᠶᠢᠨ ᠵᠢᠱᠢᠭᠦᠦ ᠤᠷᠲᠤ (cm)</text>
					</view>
					<view class="w_30_p h_full text_center bgc_eee border_radius_10 pv_10 border_box">
						<input class="mt_15" type="number" v-model="growInfo.tiXieChang">
					</view>
				</view>
			</view>
			
			<view class="absolute bottom_10 right_10 bgc_fff p_10 border_box border_radius_10 w_98_p mt_10 flex_row_around">
				<view class="w_48_p h_100 bgc_eee border_radius_10 text_center">
					<text class="vertical_text mn text_center fs_36">ᠱᠤᠭᠤᠮ ᠳᠡᠭᠡᠷᠡᠬᠢ ᠬᠡᠮᠵᠢᠯᠲᠡ</text>
				</view>
				
				<view class="w_48_p p_7 bgc_1c9aa0 border_radius_10 text_center">
					<text class="vertical_text mn text_center color_fff fs_36" @click="saveUpdate()">ᠲᠤᠱᠢᠶᠠᠬᠤ</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import getSystemInfo from '../../mixins/basic.js'
	import NET from '@/utils/request.js'
	import API from '@/config/api.js'
	
	export default {
		mixins: [getSystemInfo],
		data() {
			return {
				activeIndex: 0,
				
				growInfo: {
					date: '',
					weight: '',
					height: '',
					xiongWei: '',
					fuWei: '',
					shiZiBu: '',
					tiXieChang: ''
				}
			}
		},
		onLoad(options) {
			// 获取设备高度
			this.getSystemHeight()
	
		},
		methods: {
			// 选择图片
			chooseImg() {
				let that = this
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],  
					sourceType: ['album', 'camera'], 
					success: function (res) {
						console.log(res)
						
						for (let i in res.tempFilePaths) {
							let params = {
								file: res.tempFilePaths[i],
								type: 'image'
							}
							
							NET.upload(API.uploadFile, params, res.tempFiles[i].path)
							.then(res => {
								let respon = JSON.parse(res)
								if (respon.code == 200) {						
									that.imgList.push(respon.data) 
								}
							})
							.catch(err => {
								uni.showToast({
									title: '图片上传失败！',
									icon: 'none'
								})
								console.error('图片上传失败！', err)
							})
						}
					}
				})
			},
			
			// 删除图片
			deleteImg(index) {5
				this.updateData.flies.splice(index, 1)
			},
		
			// 扫描条码
			saoMiaoTiaoMa() {
				let that = this
				// 调起条码扫描
				uni.scanCode({
					scanType: ['qrCode'],
					success: function (res) {						
						that.erBiaoHao = res.result
					},
					fail: () => {
						uni.showToast({
							title: '扫码失败！',
							icon: 'error'
						})
					}
				});
			},
			
			// 保存修改
			saveUpdate() {
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.active_tab { font-weight: bold; color: #1c9aa0; border-bottom: 8rpx solid #1c9aa0; }
	
	.update_yang_zhi_box {
		width: 100%;
		position: relative;
		
		// 标题
		.title_box {
			width: 80rpx;
			height: 100%;
			box-sizing: border-box;
			position: relative;
			float: left;
		}
	
		// 内容
		.content_box {
			width: calc(100% - 80rpx);
			height: 100%;
			overflow-y: auto;
			float: left;
			box-sizing: border-box;
			// border: 1px solid #090;
			
			.scroll-Y {
				height: 120rpx;
			}
			.tab_box {
				white-space: nowrap;
				width: 100%;
				height: 120rpx;
			}
			.scroll-view-item {
				height: 120rpx;
				text-align: center;
				font-size: 36rpx;
			}
			.tab_item {
				width: 120rpx;
				height: 120rpx;
				text-align: center;
				font-size: 36rpx;
				display: inline-block;
			}
		}
	}
</style>

<style lang="less">
	@import url('~@/static/css/plugin.css');
	
	.uni-date { margin-top: 0 !important; }
	
	.uni-select__input-placeholder, .uni-select__input-text {
		font-size: 16px !important;
	}
	
	.uni-select__selector-scroll {
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		
		.uni-select__selector-item {
			float: left;
			display: inline-block;
			
			text {
				writing-mode: vertical-lr;
				font-family: 'mn';
			}
		}
	}
	
	.uni-select__input-box {
		height: 60rpx !important; 
	}
	
	.uni-select__input-text {
		writing-mode: vertical-lr;
		font-family: 'mn';
	}
	
</style>